<template>
	<view>
		<view class="form">
			<form @submit="formSubmit">
				<view class="uni-form-item uni-column">
					<view class="title">真实姓名:</view>
					<input class="uni-input" name="real_name" placeholder="请输入您的真实姓名" />
				</view>
				<view class="uni-form-item uni-column">
					<view class="title">联系电话:</view>
					<input class="uni-input" name="mobile" placeholder="请输入您的联系电话" />
				</view>
				<view class="about">
					学校相关信息
				</view>
				<view class="uni-form-item uni-column">
					<view class="title">学生学号:</view>
					<input class="uni-input" name="student_number" placeholder="请输入您的学号" />
				</view>
				<view class="uni-form-item uni-column">
					<view class="title">所在专业:</view>
					<picker mode="selector" @change="bindPickerChange" :value="index" :range="array"
						name="student_depart">
						<view class="uni-input" style="line-height: 80rpx; width: 300rpx; color: #333;">{{array[index]}}
						</view>
						<text class="icon-cheveron-down"></text>
					</picker>
				</view>
				<view class="about">
					个人照片上传
				</view>
				<view class="uni-form-item uni-column">
					<view class="title" style="line-height: 100rpx;">人脸采集:</view>
					<view class="icon-camera camera" @click="chooseImg">

					</view>
				</view>

				<view class="apply">
					<button class="goapply" @click="goapply">申请权限变更</button>
					<text>当前权限为 {{ position }} </text>
				</view>

				<view class="uni-btn-v">
					<button form-type="submit">提交</button>
				</view>
			</form>
		</view>
	</view>
</template>
<script>
	import {
		getAllAcademy
	} from '../../api/getAllAcademy.js'
	import { updOrGetUserInfo } from '../../api/user.js'
	export default {
		data() {
			return {
				Academy: [],
				array: ['请选择'],
				index: 0
			}
		},
		onLoad() {
			this.getAllAcademy()
		},
		computed: {
			position() {
				if (this.$store.state.userInfo.role === 3) return 'Student'
				if (this.$store.state.userInfo.role === 2) return 'Teacher'
				if (this.$store.state.userInfo.role === 1) return 'Super Manager'
			}
		},
		methods: {
			async getAllAcademy() {
				const {
					data: res
				} = await getAllAcademy()
				res.data.forEach(item => {
					this.Academy.push(...item.child)
				})
				this.Academy.forEach(item => {
					this.array.push(item.name)
				})
			},
			bindPickerChange: function(e) {
				this.index = e.target.value
			},
			formSubmit: function(e) {
				var formdata = e.detail.value
				if(formdata.real_name == ''){
					return uni.showToast({
						title:'请填写真实姓名',
						icon:'error'
					})
				}
				if(formdata.mobile == ''){
					return uni.showToast({
						title:'请填写电话号码',
						icon:'error'
					})
				}
				if(formdata.student_number == 0){
					return uni.showToast({
						title:'请填写学号',
						icon:'error'
					})
				}
				if(formdata.student_depart == 0){
					return uni.showToast({
						title:'请填写专业',
						icon:'error'
					})
				}
				formdata.type = 2
				formdata.student_depart = Number(formdata.student_depart)  + 11
				uni.showModal({
					title: '提示',
					content: '即将提交信息',
					success: async function(res) {
						if (res.confirm) {
							const response = await updOrGetUserInfo(formdata)
							console.log(response.data)
							if(response.statusCode === 802){
								if(response.data.msg === '学号不合法'){
									uni.showToast({
										title:'学号不合法',
										icon:'error'
									})
								}
								if(response.data.msg === '电话号码不合法'){
									uni.showToast({
										title:'电话号码不合法',
										icon:'error'
									})
								}
							}
							if(response.statusCode === 200){
								uni.showToast({
									title:'提交成功',
								})
							}
						}
					}
				});
			},
			formReset: function(e) {
				console.log('清空数据')
			},
			chooseImg() {
				uni.chooseImage({
					count: 1,
					sizeType: ['original', 'compressed'],
					success: res => {
						console.log(res.tempFilePaths)
						// uni.uploadFile({
						// 	url: '后端接口地址',
						// 	filePath: res.tempFilePaths[0],
						// 	header: {
						// 		'Authorization': 'Bearer ' + token.access_token,
						// 		"Content-Type": "multipart/form-data",
						// 	},
						// 	formData: {
						// 		id: 123 // 后端接收的其他参数
						// 	},
						// 	name: 'file', // 后端接收的文件名
						// 	complete: (res) => {
						// 		console.log('res', res)
						// 	}
						// })
					}
				})
			},
			goapply() {
				uni.navigateTo({
					url: '/pages/apply-position/apply-position'
				})
			}
		}
	}
</script>

<style lang="less">
	.form {
		padding-left: 45rpx;
		margin-top: 40rpx;

		.about {
			margin-top: 30rpx;
			text-align: center;
			font-size: 30rpx;
			color: #999;
			margin-left: -45rpx;
		}

		.uni-form-item {
			display: flex;
			margin: 25rpx 0;

			.title {
				margin-right: 20rpx;
				line-height: 80rpx;
			}

			.uni-input {
				width: 450rpx;
				height: 80rpx;
				box-sizing: border-box;
				font-size: 34rpx;
				color: #999;
				padding-left: 30rpx;
				border-bottom: 1px solid #ccc;
			}
		}

		.uni-btn-v {
			button {
				margin-top: 200rpx;
				margin-left: 180rpx;
				width: 300rpx;
				height: 70rpx;
				letter-spacing: 8rpx;
				line-height: 70rpx;
				color: #FFFFFF;
				background-color: #67e5ce;
			}
		}
	}

	.icon-cheveron-down {
		&::before {
			position: absolute;
			top: 30rpx;
			right: 10rpx;
		}
	}

	.camera {
		width: 180rpx;
		height: 100rpx;
		text-align: center;
		background-color: #f8f9f9;
		border: 1px solid #eee;

		&::before {
			line-height: 100rpx;
			font-size: 50rpx;
			color: #999;
		}
	}

	.apply {
		display: flex;
		margin: 50rpx 0 50rpx -70rpx;

		text {
			margin-right: 100rpx;
			line-height: 60rpx;
		}

		.goapply {
			width: 250rpx;
			height: 60rpx;
			line-height: 60rpx;
			background-color: #f8f9f9;
			font-size: 30rpx;
		}
	}
</style>
